<template>
  <div class="particles-container">

    <a-flex align="center" justify="center" :style="slotStyle">

      <div class="particles-content" :style="{zIndex: props.zIndex}">
        <slot></slot>
      </div>
    </a-flex>
    
   <div id="particles-js" class="particles"></div>
  </div>
</template>

<script setup>
import { onMounted, defineProps, watch } from "vue";
import "particles.js"
import particlesJson from "./particles.json"

// 首先需要引入一下我们刚刚创建的store
import useTheme from '../../stores/module/theme'
// 因为是个方法，所以我们得调用一下
const themeStore = useTheme()

const props = defineProps({
  zIndex: String,
  color: null,
  slotStyle: Object
})

watch(
  () => themeStore.themeColor,
  (newVal, oldVal) => {
    // console.log(2222, newVal, oldVal)
    initParticles(newVal)
  }
)

// themeStore.$subscribe((mutations, state) => {
// })

onMounted(() => {
  initParticles()
})

const initParticles = (color) => {
  particlesJson.particles.color.value = props.color || color || themeStore.themeColor
  particlesJson.particles.line_linked.color = props.color || color ||  themeStore.themeColor
  window.particlesJS('particles-js', particlesJson);
  // console.log(1111111, particlesJson.particles.line_linked.color, themeStore.color)
}
</script>

<style lang="scss" scoped>
.particles-container {
  width: 100%;
  height: 100%;
  position: relative;
  .particles-content {
    position: relative;
  }
  .particles {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>